<template>
  <div class="container">
    <el-row>
      <el-col :xs="{span:24,offset:0}" :sm="{span:16,offset:0}">
        <p class="title">待受理表单</p>
      </el-col>
      <el-col :xs="{span:24,offset:0}" :sm="{span:6,offset:2}">
        <div class="search-box">
          <el-input placeholder="学号, 报修人, 地点" prefix-icon="el-icon-search" v-model="input_box"></el-input>
          <el-button type="primary" @click="search">搜索</el-button>
        </div>
      </el-col>
    </el-row>
    <!-- 报修列表 -->
    <el-row>
      <el-col :xs="{span:24,offset:0}" :sm="{span:24,offset:0}">
        <div class="box">
          <el-table
            :data="search(input_box)"
            stripe
            border
            :header-cell-style="headClass"
            :cell-style="tableClass"
            style="width: 100%"
            @sort-change="sort_change"
          >
            <el-table-column type="expand" label="展开详情" fixed="left" width="50">
              <div slot-scope="props">
                <p
                  v-if="props.row.time!==undefined&&props.row.time!=='NULL'&&props.row.time!==null&&props.row.time!==''"
                >
                  <span>报修时间：</span>
                  {{ props.row.time | dateFormat }}
                </p>
                <p
                  v-if="props.row.network!==undefined&&props.row.network!=='NULL'&&props.row.network!==null&&props.row.network!==''"
                >
                  <span>网络环境：</span>
                  {{ props.row.network }}
                </p>
                <p
                  v-if="props.row.port!==undefined&&props.row.port!=='NULL'&&props.row.port!==null&&props.row.port!==''"
                >
                  <span>端口状态：</span>
                  {{ props.row.port }}
                </p>
                <p
                  v-if="props.row.young!==undefined&&props.row.young!=='NULL'&&props.row.young!==null&&props.row.young!==''"
                >
                  <span>WiFi状态：</span>
                  {{ props.row.young }}
                </p>
                <p
                  v-if="props.row.test!==undefined&&props.row.test!=='NULL'&&props.row.test!==null&&props.row.test!==''"
                >
                  <span>测试结果：</span>
                  {{ props.row.test }}
                </p>
                <p
                  v-if="props.row.errcode!==undefined&&props.row.errcode!=='NULL'&&props.row.errcode!==null&&props.row.errcode!==''"
                  style="text-indent:1em"
                >
                  <span>错误码：</span>
                  {{ props.row.errcode }}
                </p>
                <p
                  v-if="props.row.portnum!==undefined&&props.row.portnum!=='NULL'&&props.row.portnum!==null&&props.row.portnum!==''"
                  style="text-indent:1em"
                >
                  <span>端口号：</span>
                  {{ props.row.portnum }}
                </p>
                <p
                  v-if="props.row.descrip!==undefined&&props.row.descrip!=='NULL'&&props.row.descrip!==null&&props.row.descrip!==''"
                >
                  <span>错误描述：</span>
                  {{ props.row.descrip }}
                </p>
              </div>
            </el-table-column>
            <el-table-column prop="id" sortable="custom" label="编号" width="80"></el-table-column>
            <el-table-column prop="stuId" label="学号" sortable="custom" min-width="150"></el-table-column>
            <el-table-column prop="name" label="报修人" min-width="120"></el-table-column>
            <el-table-column prop="phone" sortable="custom" label="联系电话" min-width="150"></el-table-column>
            <el-table-column prop="place" label="地点" min-width="120"></el-table-column>
            <el-table-column
              :formatter="dateFormat"
              sortable="custom"
              prop="time"
              label="报修时间"
              min-width="120"
            ></el-table-column>

            <el-table-column label="操作" width="90">
              <template slot-scope="scope">
                <el-button
                  class="clickBtn"
                  type="text"
                  size="small"
                  @click="handleEditYes(scope.$index,scope.row)"
                >受理</el-button>
                <el-button
                  class="clickBtn"
                  type="text"
                  size="small"
                  @click="handleEditNo(scope.$index,scope.row)"
                >拒绝</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
    <!--分页组件-->
    <el-row class="page">
      <el-col :xs="{span:24,offset:0}" :sm="{span:18,offset:6}">
        <el-pagination
          small
          background
          layout="prev ,pager,next"
          :total="pagesizeCount"
          :pager-count="5"
          :page-size="pagesize"
          :current-page.sync="currpage"
          @current-change="getNewlist(currpage)"
        ></el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [], // 数据列表
      input_box: "", // 搜索内容
      currpage: 1, //当前页码
      pagesize: 10, //每页展示数目
      pagesizeCount: 0, //总条数
      proptype: "", //存放column.prop的字符串值
      pagesCount: 1 //总页数
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    // 获取报修列表信息
    getList() {
      this.$axios
        .get(
          "/api/manage/order/queryListByStatus/" +
            this.currpage +
            "/10000/1" 
        )
        .then(res => {
          this.input_box = "";
          this.tableData = res.data.orders;
          this.pagesizeCount = res.data.dataCount;
          this.pagesCount = res.data.pagesCount;
        })
        .catch(err => {
          this.$message.error("获取列表失败");
        });
    },
    //切换页数
    getNewlist(cpage) {
      this.currpage = cpage;
    },
    //按钮事件
    handleEditYes(index, row) {
      this.$confirm("确定要 受理 吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      }).then(() => {
        this.$axios
          .get(
            "/api/manage/order/updateStatus/" +
              row.id +
              "/2/" +
              this.$store.state.user.name
          )
          .then(res => {
            if (res.data.code == 200) {
              this.$message({
                type: "success",
                message: "受理成功,该单已加入进待维修!"
              });
              this.tableData.splice(index+(this.currpage-1)*this.pagesize,1);
            }
          })
          .catch(err => {
            this.$alert("操作失败,请稍后重试!", {
              confirmButtonText: "确定",
              center: true
            });
          });
      });
    },
    handleEditNo(index, row) {
      this.$confirm("确定要 拒绝 吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      }).then(() => {
        this.$axios
          .get(
            "/api/manage/order/updateStatus/" +
              row.id +
              "/0/" +
              this.$store.state.user.name
          )
          .then(res => {
            if (res.data.code == 200) {
              this.$message({
                type: "success",
                message: "拒绝成功"
              });
              this.tableData.splice(index+(this.currpage-1)*this.pagesize,1);
            }
          })
          .catch(err => {
            this.$alert("操作失败,请稍后重试!", {
              confirmButtonText: "确定",
              center: true
            });
          });
      });
    },
    //列表日期格式
    dateFormat(row, column, cellValue) {
      var date = new Date(cellValue); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D = date.getDate() + " ";
      return Y + M + D;
    },
    // 表头样式设置
    headClass() {
      return "text-align: center;";
    },
    // 单元格样式
    tableClass() {
      return "text-align: center;";
    },
    // 搜索功能
    search(input) {
      // ES6方法String.prototype.includes('要包含的字符串')
      //  如果包含，则返回 true ，否则返回 false
      //console.log(JSON.stringify(this.tableData));
      if (input.trim() == "") {
        this.pagesizeCount = this.tableData.length||1; //需在渲染数据前设置总页数
        return this.tableData.slice(
          (this.currpage - 1) * this.pagesize,
          this.currpage * this.pagesize
        );
      } else {
        var newtable = this.tableData.filter(item => {
          if (
            JSON.stringify(item.stuId).includes(input) ||
            JSON.stringify(item.name).includes(input) ||
            JSON.stringify(item.place).includes(input)
          ) {
            return item;
          }
        });
        this.pagesizeCount = newtable.length; //重新设置总页数
        return newtable.slice(
          (this.currpage - 1) * this.pagesize,
          this.currpage * this.pagesize
        );
      }
    },
    //排序功能
    sort_change(column) {
      this.currpage = 1; // 排序后返回第一页
      this.proptype = column.prop; // 将键名prop赋值给变量proptype
      if (column.order === "descending") {
        this.tableData.sort(this.my_desc_sort);
      } else if (column.order === "ascending") {
        this.tableData.sort(this.my_asc_sort);
      }
    },
    my_desc_sort(a, b) {
      return b[this.proptype] - a[this.proptype]; // a["time"] 等价于 a.time
    },
    my_asc_sort(a, b) {
      return a[this.proptype] - b[this.proptype];
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  max-width: 1200px;
  margin: 0 auto;
  .title {
    font-size: 30px;
    margin: 10px auto;
  }
  .search-box {
    display: flex;
    justify-content: space-between;
    margin: 10px auto;
  }
  .page {
    margin-top: 10px;
  }
  .clickBtn:hover {
    text-decoration: underline;
  }
}
</style>